<template>
    <div class="searcher">
        <div class="result">
            <h2>最佳匹配</h2>
            <div class="singer" v-if="singer">
                <img :src="singer.picUrl" alt="" />
                <div class="left">
                    <h3>
                        歌手:<b v-html="$options.filters.highlight(singer.name, keywords)"> </b>
                    </h3>
                    <router-link tag="i" :to="`/Singer/${singer.id}`"></router-link>
                </div>
            </div>
            <div class="songlist" v-if="songlist">
                <img :src="songlist.coverImgUrl" alt="" />
                <div class="left">
                    <h3>
                        歌单:<b v-html="$options.filters.highlight(songlist.name, keywords)"> </b>
                    </h3>
                    <p>by {{ songlist.creator.nickname }}</p>
                    <router-link tag="i" :to="`/songlist/${songlist.id}`"></router-link>
                </div>
            </div>
            <music-list
                :musiclist="resultlist"
                :keyword="keywords"
                @play="$emit('play', $event)"
                @isfull="isfull = $event"
            ></music-list>
        </div>
        <load-animate v-show="isload"></load-animate>
        <div v-show="isload" ref="loadmore" class="loadmore" @click.stop="loadmore">加载更多</div>
    </div>
</template>

<script>
import MusicList from "./MusicList.vue";
import _ from "lodash";

// 接口 /cloudsearch?keywords=海阔天空
export default {
    components: { MusicList },
    props: {
        keywords: {
            type: String,
            define: "",
        },
        isplay: {
            type: Boolean,
            define: true,
        },
    },
    data() {
        return {
            resultlist: [],
            songlist: null,
            singer: null,
            page: 1,
            isload: true,
        };
    },
    created() {
        this.getresultlist();
        this.sethistory();
        window.addEventListener("scroll", this.windowscroll);
        this.getsonglist();
        this.getsinger();
    },
    //销毁组件 移除滚动事件
    beforeDestroy() {
        window.removeEventListener("scroll", this.windowscroll);
    },
    //离开路由 移除滚动事件
    beforeRouterleave(to, from, next) {
        window.removeEventListener("scroll", this.windowscroll);
        next();
    },
    methods: {
        async getresultlist(offset = 0) {
            await this.axios
                .get(`/cloudsearch?keywords=${this.keywords}&type=1&limit=20&${offset}`)
                .then((res) => {
                    let resultlist = res.result.songs.map((item) => {
                        item.song = {
                            alias: item.alia,
                            privilege: item.privilege,
                            artists: item.ar,
                            album: item.al,
                        };
                        return item;
                    });
                    this.resultlist = this.resultlist.concat(resultlist);
                    this.isload = false;
                });
        },
        async getsonglist() {
            await this.axios.get(`/search?keywords=${this.keywords}&type=1000`).then((res) => {
                this.songlist = res.result.playlists[0];
            });
        },
        async getsinger() {
            await this.axios.get(`/search?keywords=${this.keywords}&type=100`).then((res) => {
                this.singer = res.result.artists[0];
            });
        },
        loadmore() {
            this.page++;
            let offset = 20 * (this.page - 1);
            this.isload = true;
            this.getresultlist(offset);
        },
        sethistory() {
            if (this.keywords == "") {
                return;
            }
            let historys = localStorage.getItem("seacherhistory");
            let historyArr = [];
            if (historys) {
                historyArr = JSON.parse(historys);
            }
            historyArr.unshift(this.keywords);
            historyArr = _.uniq(historyArr);
            localStorage.setItem("seacherhistory", JSON.stringify(historyArr));
        },
        windowscroll: _.debounce(function () {
            //卷去的距离
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //loadmore 距离顶部的距离
            let loadmoreHight = this.$refs.loadmore.offsetTop;
            //显示内容的高度
            let windowHight = window.innerHeight;
            if (scrollTop + windowHight >= loadmoreHight + 173) {
                this.loadmore();
            }
        }, 300),
    },

    filters: {
        highlight(value, keywords) {
            return value.replace(keywords, `<b style="color:#507daf">${keywords}</b>`);
        },
    },
};
</script>

<style lang="scss" scoped>
.searcher {
    .result {
        h2 {
            font-size: 12px;
            color: #666;
            padding-left: 10px;
        }
        .singer {
            padding: 10px 0 10px 10px;
            display: flex;
            img {
                width: 50px;
                height: 50px;
            }
            .left {
                flex: 1;
                padding-left: 15px;
                position: relative;
                h3 {
                    display: inline-block;
                    font-size: 17px;
                    line-height: 50px;
                }
                i {
                    width: 13px;
                    height: 13px;
                    background: url(../assets/images/gt_icon.png) no-repeat;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    right: 15px;
                    background-size: contain;
                }
            }
        }
        .songlist {
            padding: 10px 0 10px 10px;
            display: flex;
            img {
                width: 50px;
                height: 50px;
            }
            .left {
                flex: 1;
                padding-left: 15px;
                position: relative;
                overflow: hidden;
                white-space: nowrap;
                h3 {
                    width: 90%;
                    display: inline-block;
                    font-size: 17px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                p {
                    font-size: 12px;
                    color: #999;
                }
                i {
                    width: 13px;
                    height: 13px;
                    background: url(../assets/images/gt_icon.png) no-repeat;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    right: 15px;
                    background-size: contain;
                }
            }
        }
    }
    .loadmore {
        line-height: 50px;
        text-align: center;
    }
}
</style>
